<template>
  <view>
   
    <!-- 头部 -->
    <u-sticky bgColor="#fff">
      <u-tabs
        lineWidth="30"
        lineColor="#f56c6c"
        :list="list1"
        @click="click"
        :activeStyle="{
          color: '#303133',
          fontWeight: 'bold',
        }"
        :inactiveStyle="{
          color: '#606266',
        }"
        itemStyle="padding:0 75px;height:45px"
      ></u-tabs>
    </u-sticky>
    <!-- 全部已读 -->
    <view class="read">
      <image src="/static/icon_yidu@2x (1).png" mode=""></image> <text>全部已读</text>
    </view>
    <!--1. 公告页面 -->
    <block v-if="itemIndex==0">
   <!--每条 message -->
      <navigator class="message" url="/subpkg/message-detail/message-detail?keyword=notice">
        <u-badge :isDot="true" type="error"></u-badge>
        <view class="content">在营车辆年检通知，为保障车辆能够…</view>
        <text>03-28 09:20</text>
      </navigator>
      </block>
      <!--2. 任务通知页面 -->
      <block v-else>
        <navigator class="translateTask" url="/subpkg/message-detail/message-detail?keyword=task">
          <vive class="title"> <text>您有新的运输任务</text> <u-badge :isDot="true" type="error"></u-badge></vive> 
          <view class="info">
            <text class="carNum"> 运输车辆：京A 123456</text>
            <text class="route">运输路线：北京—广州</text>
          </view>
          <view class="time">
            <text>2022.05.04 13:00</text>
         <view class="lookDetail">查看详情</view>
          </view>
        </navigator>
      </block>
  </view>
</template>

<script>
  export default {
    name: '',
    components: {},
    data() {
      return {
        itemIndex:1,
        list1: [
          {
            name: '公告'
          },
          {
            name: '任务通知'
          },
          
        ],
      };
    },
    created(){},
    mounted(){},
    onLoad(){
   
    },
    methods: {
      click(item) {
        console.log('item', item);
        this.itemIndex=item.index
      }
    }
  }
</script>

<style lang="scss">
page {
  background-color:#f5f5f5 ;
}
.read {
  display: flex;
  align-items: center;
  margin-left: 17px;
  height: 55px;
  line-height: 55px;
  font-size: 14px;
  color: #818181;
  image {
    width: 15px;
    height: 15px;
    border: 1px dashed #818181;
    text-align: center;
    line-height: 15px;
  }
}
.message {
  height: 60px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .content {
    width: 254px;
    margin-right: 11px;
    font-size: 14px;
  }
  text {
    color: #818181;
    font-size: 12px;
    margin-right: 14px;
    margin-left: 11px;
  }
}
.translateTask {
  // width: 330px;
  height: 151px;
  background-color: #fff;
  border-radius: 10px;
  padding-left: 16px;
  padding-right: 16.5px;
  margin-left: 14.5px;
  margin-right: 12.5px;
  
  // margin-left: 14.5px;
  margin-bottom: 15px;
 
  .title {
    display: flex;
    align-items: center;
    width: 254px;
    height: 49px;
    line-height: 49px;
    font-size: 14px;
    text {margin-right: 8px;}
  }
  .info {
    height: 45px;
    line-height: 45px;
    color: #818181;
    font-size: 13px;
    border-top: 0.5px solid #e8e1e3;
   text {
     width: 151px;
     margin-right: 7px;
   }
  }
  .time {
    width: 260px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #818181;
    font-size: 12px;
    margin-top: 6px;
    .lookDetail {
      color: #EF4F3F;
      font-size: 12px;
      width: 76px;
      height: 24px;
      border: 1px solid #EF4F3F;
      border-radius: 12px;
      text-align: center;
      line-height :24px;
      margin-right: -20px;
    }
  }
}
</style>
